<template>
	<view class="transaction-list">
		<scroll-view scroll-y class="list-container" 
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="onRefresh"
		>
			<view class="transaction-item" v-for="item in transactionList" :key="item.id">
				<view class="transaction-info">
					<text class="type">{{getTransactionType(item.type)}}</text>
					<text class="order-id">订单号：{{item.orderId || '--'}}</text>
					<text class="time">{{item.createTime}}</text>
				</view>
				<view class="transaction-amount" :class="item.type === 1 ? 'income' : 'expense'">
					<text>{{item.type === 1 ? '+' : '-'}}¥{{item.amount}}</text>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="transactionList.length === 0">
				<image src="/static/images/empty-data.png" mode="aspectFit"></image>
				<text>暂无交易记录</text>
			</view>

			<!-- 加载更多 -->
			<view class="loading-more" v-if="transactionList.length > 0">
				<text v-if="hasMore">加载中...</text>
				<text v-else>没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { listMy } from '@/api/wallet/walletTransaction.js'

export default {
	data() {
		return {
			transactionList: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10
			},
			hasMore: true,
			refreshing: false
		}
	},
	
	onLoad() {
		this.getTransactionList()
	},
	
	methods: {
		// 获取交易类型文本
		getTransactionType(type) {
			const typeMap = {
				1: '充值',
				2: '提现',
				3: '消费',
				4: '退款申请',
				5: '退款',
				6: '球场预订'
			}
			return typeMap[type] || '未知类型'
		},
		
		async getTransactionList() {
			try {
				const res = await listMy(this.queryParams)
				if (res.code === 200) {
					const { rows, total } = res
					if (this.queryParams.pageNum === 1) {
						this.transactionList = rows
					} else {
						this.transactionList = [...this.transactionList, ...rows]
					}
					this.hasMore = this.transactionList.length < total
				}
			} catch (error) {
				console.error('获取交易记录失败:', error)
				uni.showToast({
					title: '获取数据失败',
					icon: 'none'
				})
			}
		},
		
		loadMore() {
			if (!this.hasMore) return
			this.queryParams.pageNum++
			this.getTransactionList()
		},
		
		async onRefresh() {
			this.refreshing = true
			this.queryParams.pageNum = 1
			await this.getTransactionList()
			this.refreshing = false
		}
	}
}
</script>

<style lang="scss" scoped>
.transaction-list {
	min-height: 100vh;
	background: #f5f5f5;
	
	.list-container {
		height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}
	
	.transaction-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.transaction-info {
			.type {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 8rpx;
				display: block;
			}
			
			.order-id {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 8rpx;
				display: block;
			}
			
			.time {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.transaction-amount {
			font-size: 32rpx;
			font-weight: bold;
			
			&.income {
				color: #4CAF50;
			}
			
			&.expense {
				color: #ff6b35;
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.loading-more {
		text-align: center;
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #999;
	}
}
</style> 